@for $i from 5 through 30 {
  .fs#{$i} {
    font-size: 1px * $i;
  }
  .mt#{$i} {
    margin-top: 1px * $i;
  }
  .mb#{$i} {
    margin-bottom: 1px * $i;
  }
  .ml#{$i} {
    margin-left: 1px * $i;
  }
  .mr#{$i} {
    margin-right: 1px * $i;
  }
  .pt#{$i} {
    padding-top: 1px * $i;
  }
  .pb#{$i} {
    padding-bottom: 1px * $i;
  }
  .pl#{$i} {
    padding-left: 1px * $i;
  }
  .pr#{$i} {
    padding-right: 1px * $i;
  }
}

.z10 {
  position: relative;
  z-index: 10;
}

.z20 {
  position: relative;
  z-index: 20;
}

.z50 {
  position: relative;
  z-index: 50;
}

.z100 {
  position: relative;
  z-index: 100;
}

.df {
  display: flex;
}
